<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>订单列表</title>

	<link rel="stylesheet" href="../layui/css/layui.css">
	<link rel="stylesheet" href="css/manage.css">

	<style>
		/*设置表格表头字体样式*/
		.layui-table th {
			/*表头内容居中显示*/
			text-align: center;
			/*字体加粗*/
			font-weight: bold;
		}

		/*设置表格宽度*/
		.layui-table {
			width: 99%;
		}

		/*搜索框*/
		.search {
			display: inline-block;
			height: 40px;
			line-height: 1.2;
			width: 220px;
			padding: 0 40px 0 20px;
			border: 1px solid #ccc;
			font-size: 14px;
			border-radius: 30px;
			background-color: #faf8fa;
			overflow: hidden;
			color: #333;

		}

		/*搜索按钮*/
		.sub {
			display: inline-block;
			position: absolute;
			left: 241px;
			top: 21px;
			height: 40px;
			width: 40px;
			background-color: #cccccc;
			border-radius: 30px;
			background-image: url('images/query.png');
			cursor: pointer;
			border: none;
		}

		.sub:hover {
			background-color: #009688;
		}

		.bb {
			display: inline-block;
			height: 35px;
			line-height: 1.2;
			width: 30px;
			text-align: center;
			padding: 0 10px 0 10px;
			border: 1px solid #ccc;
			font-size: 14px;
			background-color: #faf8fa;
			color: #333;
			overflow: hidden;
		}

		/* 设置页面右上角切换分页显示按钮的样式 */
		.qiehuan {
			display: inline-block;
			position: absolute;
			right: 15px;
		}

		.not {
			padding: 4px;
			background-color: orange;
			color: white;
			border-radius: 4px;
			font-size: 7px;
		}

		.has {
			padding: 4px;
			background-color: #26ce61;
			color: white;
			border-radius: 4px;
			font-size: 7px;
		}
		/* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
	</style>
</head>

<body>
	<div id="order-list" v-cloak>
		<div style="margin-top:20px;">
			<div style="display:inline-block;">
				<form>
					<input type="text" id="cond" value="" required placeholder="寻找订单记录" class="search">
					<input class="sub" type="button" value="" @click="selectByLike">

				</form>
			</div>

			<div class="layui-form-item" style="display: inline-block;">
				<div class="layui-input-block">
					<input type="text" id="date" required placeholder="yyyy-MM-dd" lay-verify="date"
						autocomplete="off" class="layui-input c">	
				</div>
			</div>
			<button class="layui-btn" @click="selectByLike2" type="button">根据时间查询</button>
			
			<div class="qiehuan" @click="checkPager">
				<button class="layui-btn" id="check" type="button">分页显示</button>
			</div>
			
		</div><br/>



		<table class="layui-table">

			<thead>
				<tr>
					<th>ID</th>
					<th>下单用户</th>
					<th>下单时间</th>
					<th>电影名称</th>
					<th>放映影厅</th>
					<th>放映日期</th>
					<th>开场时间</th>
					<th>价格</th>
					<th>选购座位</th>
					<th>状态</th>
				</tr>
			</thead>

			<tbody>
				<tr align="center" v-for="(o,i) in orders" :key="i">
					<td>{{o.orderId}}</td>
					<td>{{o.userId}}</td>
					<td>{{o.orderTime}}</td>
					<td>《{{o.filmName}}》</td>
					<td>{{o.hallName}}</td>
					<td>{{o.showDate}}</td>
					<td>{{o.startTime}}</td>
					<td>{{o.price}}</td>
					<td style="width: 150px;">{{o.seats}}</td>
					<td><span :class="{not:o.status==0,has:o.status==1}">{{o.status==0?'待付款':'已完成'}}</span></td>
				</tr>

				<tr v-if="orders==null || orders.length==0">
					<td colspan="10" align="center">无数据</td>
				</tr>
			</tbody>

		</table>

		<div align="center" v-if="isShow==true" style="margin-bottom: 50px;margin-top: 20px;">
			<a><button class="layui-btn" @click="first">首页</button></a>
			<a><button class="layui-btn" @click="up">上一页</button></a>
			<a><button class="layui-btn" @click="down">下一页</button></a>
			<a><button class="layui-btn" @click="end">尾页</button></a>

			<div style="display: inline-block;">
				<input type="text" v-bind:value="currentPage" class="bb" />
				<input type="button" value="GO" class="layui-btn" @click="go"/>
			</div>
		</div>
	</div>

	<script src="../js/jquery-1.12.4.min.js"></script>
	<script src="../js/Vue.js"></script>
	<script src="../layer/layer.js"></script>
	<script src="../layui/layui.js"></script>
	<script src="js/manage-order.js"></script>

	<script>
		//日期表选择
		layui.use(['form', 'layedit', 'laydate'], function () {
			var form = layui.form
				, layer = layui.layer
				, layedit = layui.layedit
				, laydate = layui.laydate;

			//日期
			laydate.render({
				elem: '#date',
				theme: '#088A68',
				trigger: 'click'   //解决闪退问题
			});
		});
	</script>
</body>
</html>